<template>
    <div class="edu-page-warp">
        <div class="tab">
            <div v-for="(t,index) in tabs" :key="index">
                <span :class="tabFocus==t.val?'current':''" @click="changeTab(t.val)">{{t.text}}</span>
                <span v-if="index!=tabs.length-1" class="split">|</span>
            </div>
        </div>
        <div style="clear:both"></div>
        <!--全国专业学位专业目录查询-->
        <div v-if="tabFocus==0">
            <el-card shadow="never">
                <div class="edu-page-title">{{$t('message.filterCondition')}}</div>
                <el-form :model="queryForm" label-position="left" label-width="130px">
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="专业学位类别信息：">
                                <el-select v-model="queryForm.levelTwoId">
                                    <el-option
                                        v-for="item in options.categories"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="18">
                            <el-form-item class="float-right no-bottom no-right">
                                <el-button @click="reset">{{$t("message.reset")}}</el-button>
                                <el-button type="primary" @click="onSubmit">{{$t("message.filter")}}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <el-card shadow="never">
                <div class="edu-page-title">全国专业学位专业目录查询</div>
                <div class="edu-opertion-bar">
                    <div class="float-left">
                        <el-input
                            v-model="queryForm.condition"
                            placeholder="输入专业领域名称或代码搜索"
                            style="width:210px"
                            @keyup.enter.native="onSubmit"
                        >
                            <i
                                class="el-icon-search"
                                slot="suffix"
                                style="margin-top:10px;cursor:pointer"
                                @click="onSubmit"
                            ></i>
                        </el-input>
                    </div>
                    <div class="float-right">
                        <el-button type="primary" @click="handleExport">{{$t("message.export")}}</el-button>
                    </div>
                </div>
                <el-table stripe :data="viewData" size="mini" width="100%" :key="Math.random()">
                    <el-table-column label="专业学位类别代码">
                        <template slot-scope="props">
                            <span :title="props.row.levelTwoCode">{{props.row.levelTwoCode}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业学位类别名称">
                        <template slot-scope="props">
                            <span :title="props.row.levelTwoName">{{props.row.levelTwoName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业学位类别英文名称">
                        <template slot-scope="props">
                            <span :title="props.row.levelTwoNameEn">{{props.row.levelTwoNameEn}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业领域代码">
                        <template slot-scope="props">
                            <span :title="props.row.code">{{props.row.code}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业领域名称">
                        <template slot-scope="props">
                            <span :title="props.row.name">{{props.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业领域英文名称">
                        <template slot-scope="props">
                            <span :title="props.row.nameEn">{{props.row.nameEn}}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float:right;margin-top:10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <!--专业学位类别信息-->
        <div v-if="tabFocus==1">
            <el-card shadow="never">
                <div class="edu-page-title">专业学位类别信息</div>
                <div class="edu-opertion-bar">
                    <div class="float-left">
                        <el-input
                            v-model="queryForm.condition"
                            placeholder="输入专业学位类别代码或名称搜索"
                            style="width:230px"
                            @keyup.enter.native="onSubmit"
                        >
                            <i
                                class="el-icon-search"
                                slot="suffix"
                                style="margin-top:10px;cursor:pointer"
                                @click="onSubmit"
                            ></i>
                        </el-input>
                    </div>
                    <div class="float-right">
                        <el-button type="primary" @click="create">{{$t("message.add")}}</el-button>
                    </div>
                </div>
                <el-table stripe :data="viewData" size="mini" width="100%" :key="Math.random()">
                    <el-table-column label="专业学位类别代码">
                        <template slot-scope="props">
                            <span :title="props.row.code">{{props.row.code}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业学位类别名称">
                        <template slot-scope="props">
                            <span :title="props.row.name">{{props.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业学位类别英文名称">
                        <template slot-scope="props">
                            <span :title="props.row.nameEn">{{props.row.nameEn}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('message.operating')">
                        <template slot-scope="props">
                            <el-button
                                type="text"
                                size="mini"
                                @click="commonEdit(props.row)"
                            >{{$t("message.edit")}}</el-button>
                            <el-button
                                type="text"
                                size="mini"
                                @click="commonDelete(props.row)"
                            >{{$t("message.delete")}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float:right;margin-top:10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <!--专业领域信息-->
        <div v-if="tabFocus==2">
            <el-card shadow="never">
                <div class="edu-page-title">{{$t('message.filterCondition')}}</div>
                <el-form :model="queryForm" label-position="left" label-width="120px">
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item label="专业学位类别：">
                                <el-select v-model="queryForm.parentId">
                                    <el-option
                                        v-for="item in options.categories"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="18">
                            <el-form-item class="float-right no-bottom no-right">
                                <el-button @click="reset">{{$t("message.reset")}}</el-button>
                                <el-button type="primary" @click="onSubmit">{{$t("message.filter")}}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
            <el-card shadow="never">
                <div class="edu-page-title">专业领域信息</div>
                <div class="edu-opertion-bar">
                    <div class="float-left">
                        <el-input
                            v-model="queryForm.condition"
                            placeholder="输入专业领域代码或名称搜索"
                            style="width:220px"
                            @keyup.enter.native="onSubmit"
                        >
                            <i
                                class="el-icon-search"
                                slot="suffix"
                                style="margin-top:10px;cursor:pointer"
                                @click="onSubmit"
                            ></i>
                        </el-input>
                    </div>
                    <div class="float-right">
                        <el-button type="primary" @click="create">{{$t("message.add")}}</el-button>
                    </div>
                </div>
                <el-table stripe :data="viewData" size="mini" width="100%" :key="Math.random()">
                    <el-table-column label="专业学位类别">
                        <template slot-scope="props">
                            <span :title="props.row.parentName">{{props.row.parentName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业领域代码">
                        <template slot-scope="props">
                            <span :title="props.row.code">{{props.row.code}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业领域名称">
                        <template slot-scope="props">
                            <span :title="props.row.name">{{props.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="专业领域英文名称">
                        <template slot-scope="props">
                            <span :title="props.row.nameEn">{{props.row.nameEn}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('message.operating')">
                        <template slot-scope="props">
                            <el-button
                                type="text"
                                size="mini"
                                @click="commonEdit(props.row)"
                            >{{$t("message.edit")}}</el-button>
                            <el-button
                                type="text"
                                size="mini"
                                @click="commonDelete(props.row)"
                            >{{$t("message.delete")}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col>
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20, 40, 80, 100]"
                            :page-size="queryForm.pageSize_"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryForm.total_"
                            style="float:right;margin-top:10px"
                        ></el-pagination>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <!--专业学位类别信息对话框-->
        <el-dialog
            title="专业学位类别信息"
            width="800px"
            :visible.sync="showCategoryDialog"
            @close="resetFormValidate()"
            :close-on-click-modal="false"
        >
            <el-form
                :model="postForm"
                label-position="left"
                label-width="160px"
                :rules="rules"
                ref="postForm1"
            >
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-form-item label="专业学位类别代码：" prop="code">
                            <el-input v-model="postForm.code" maxlength="32"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业学位类别名称：" prop="name">
                            <el-input v-model="postForm.name" maxlength="50"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-form-item label="专业学位类别英文名称：" prop="nameEn">
                            <el-input v-model="postForm.nameEn" maxlength="50"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="24">
                        <el-form-item label="备注：" prop="remark">
                            <el-input
                                type="textarea"
                                rows="3"
                                v-model="postForm.remark"
                                maxlength="255"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="float-right">
                            <el-button type="primary" @click="commonSave">{{$t("message.save")}}</el-button>
                            <el-button @click="cancel">{{$t("message.cancel")}}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!--专业领域信息对话框-->
        <el-dialog
            title="专业领域信息"
            width="800px"
            :visible.sync="showFirstLevelDialog"
            @close="resetFormValidate()"
            :close-on-click-modal="false"
        >
            <el-form
                :model="postForm"
                label-position="left"
                label-width="140px"
                :rules="rules"
                ref="postForm2"
            >
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-form-item label="专业学位类别：" prop="parentId">
                            <el-select v-model="postForm.parentId" style="width: 100%;">
                                <el-option
                                    v-for="item in options.categories"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业领域代码：" prop="code">
                            <el-input v-model="postForm.code" maxlength="32"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="12">
                        <el-form-item label="专业领域名称：" prop="name">
                            <el-input v-model="postForm.name" maxlength="50"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="专业领域英文名称：" prop="nameEn">
                            <el-input v-model="postForm.nameEn" maxlength="50"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row gutter="20">
                    <el-col :span="24">
                        <el-form-item label="备注：" prop="remark">
                            <el-input
                                type="textarea"
                                rows="3"
                                v-model="postForm.remark"
                                maxlength="255"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="float-right">
                            <el-button type="primary" @click="commonSave">{{$t("message.save")}}</el-button>
                            <el-button @click="cancel">{{$t("message.cancel")}}</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import {
    addMajor,
    getMajorList,
    getMajorById,
    editMajor,
    deleteMajor,
    getAllMajorList,
    exportMajor,
    getReportStatus
} from "common/src/api/resource/course";
export default {
    name: "professionDegreeMajor",
    data() {
        return {
            type: 2,
            tabs: [
                {
                    text: "全国专业学位专业目录查询",
                    val: 0
                },
                {
                    text: "专业学位类别信息",
                    val: 1
                },
                {
                    text: "专业领域信息",
                    val: 2
                }
            ],
            queryForm: {
                level: null,
                condition: "",
                levelOneId: null,
                levelTwoId: null,
                parentId: null,
                pageNum_: 1,
                pageSize_: 20,
                total_: 0
            },
            postForm: {
                code: "",
                name: "",
                nameEn: "",
                parentId: "",
                level: "",
                remark: "",
                remarkEn: ""
            },
            options: {
                categories: []
            },
            rules: {
                code: [
                    {
                        required: true,
                        message: "请填写代码",
                        trigger: "blur"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请填写名称",
                        trigger: "blur"
                    }
                ],
                nameEn: [
                    {
                        required: true,
                        message: "请填写英文名称",
                        trigger: "blur"
                    }
                ],
                parentId: [
                    {
                        required: true,
                        message: "请选择上级节点",
                        trigger: "blur"
                    }
                ]
            },
            tabFocus: 0,
            viewData: [],
            showCategoryDialog: false,
            showFirstLevelDialog: false,
            editId: ""
        };
    },
    mounted: function() {
        this.init();
    },
    methods: {
        init() {
            this.queryForm.level = 2;
            this.queryForm.type = this.type;
            this.queryForm.page = false;
            this.postForm.type = this.type;
            this.getCategories();
            this.onSubmit();
        },
        onSubmit() {
            if (this.tabFocus) {
                this.queryForm.level = this.tabFocus;
            } else {
                this.queryForm.level = 2;
            }
            this.getDataList();
        },
        reset() {
            this.queryForm.condition = "";
            this.queryForm.levelOneId = null;
            this.queryForm.levelTwoId = null;
            this.queryForm.parentId = null;
        },
        getDataList(isFirstPage = true) {
            if (isFirstPage) {
                this.queryForm.pageNum_ = 1;
            }
            getMajorList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.viewData = res.data.list;
                    this.queryForm.total_ = res.data.total_;
                }
            });
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.getDataList();
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.getDataList(false);
        },
        //切换Tab
        changeTab(val) {
            this.reset();
            this.tabFocus = val;
            this.queryForm.page = val == 0 ? false : null;
            this.getCategories();
            this.onSubmit();
        },
        getCategories() {
            let data = {
                level: 1,
                type: this.type,
                page: false
            };
            getAllMajorList(data).then(res => {
                if (res.code == 200) {
                    this.options.categories = res.data.list.map(c => {
                        return {
                            label: c.name,
                            value: c.id
                        };
                    });
                }
            });
        },
        //新建门类
        create() {
            switch (this.tabFocus) {
                case 0:
                    break;
                case 1:
                    this.showCategoryDialog = true;
                    break;
                case 2:
                    this.showFirstLevelDialog = true;
                    break;
            }
        },
        //取消对话框
        cancel() {
            switch (this.tabFocus) {
                case 0:
                    break;
                case 1:
                    this.showCategoryDialog = false;
                    break;
                case 2:
                    this.showFirstLevelDialog = false;
                    break;
            }
        },
        resetFormValidate() {
            this.$refs["postForm" + this.tabFocus].clearValidate();
            this.postForm.code = "";
            this.postForm.name = "";
            this.postForm.nameEn = "";
            this.postForm.parentId = null;
            this.postForm.remark = "";
            this.postForm.remarkEn = "";
            this.editId = "";
        },
        //通用编辑
        commonEdit(row) {
            this.editId = row.id;
            getMajorById(row.id).then(res => {
                if (res.code == 200) {
                    this.postForm.code = res.data.code;
                    this.postForm.name = res.data.name;
                    this.postForm.nameEn = res.data.nameEn;
                    this.postForm.remark = res.data.remark;
                    this.postForm.parentId = res.data.parentId;
                    switch (this.tabFocus) {
                        case 1:
                            this.showCategoryDialog = true;
                            break;
                        case 2:
                            this.showFirstLevelDialog = true;
                            break;
                    }
                }
            });
        },
        //通用保存
        commonSave() {
            this.$refs["postForm" + this.tabFocus].validate(valid => {
                if (!valid) {
                    return;
                }
                this.postForm.level = this.tabFocus;
                let fn = res => {
                    if (res.code == 200) {
                        this.getDataList();
                        this.cancel();
                    }
                };
                if (this.editId) {
                    let data = _.cloneDeep(this.postForm);
                    data.id = this.editId;
                    editMajor(data).then(fn);
                } else {
                    addMajor(this.postForm).then(fn);
                }
            });
        },
        //通用删除，可删除门类，一级、二级
        commonDelete(row) {
            this.$confirm(
                this.$t("确定是否删除该项?"),
                this.$t("message.prompt"),
                {
                    confirmButtonText: this.$t("message.confirm"),
                    cancelButtonText: this.$t("message.cancel"),
                    type: "warning"
                }
            ).then(() => {
                deleteMajor({ ids: [row.id] }).then(res => {
                    if (res.code == 200) {
                        this.$message({
                            type: "success",
                            message: this.$t("删除成功")
                        });
                        this.getDataList();
                    }
                });
            });
        },
        handleExport() {
            let loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, .48)"
            });
            exportMajor(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.delayRequest(res.data.key, loading);
                } else {
                    loading.close();
                }
            });
        },
        async delayRequest(key, loading) {
            await new Promise(resolve => setTimeout(resolve, 5000));
            getReportStatus(key)
                .then(res => {
                    if (res.code == 200 && res.data.status) {
                        loading.close();
                        let path =
                            "/api/baseresservice/nationalMajor/export?path=" +
                            res.data.path;
                        window.open(path);
                    } else {
                        this.delayRequest(key, loading);
                    }
                })
                .catch(ex => {
                    this.delayRequest(key, loading);
                });
        }
    }
};
</script>
<style lang="scss" scoped>
.tab {
    margin: 20px 0;
    overflow: auto;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    div {
        float: left;
    }
    .split {
        margin: 0 20px;
    }
    .current {
        color: #262626;
    }
}
</style>
